<template>
  <!-- 方案规划导航栏 -->
  <div style="height: 100%;z-index: 1;">

      <div style="position: absolute;left: 3.5vh;top: 11vh;" class="configBox"> 

        <div style="width: 95%;height: 25%;margin: 1vh auto;text-align: center;border-bottom: 1px solid #4e849975;">
          <div style="width:30%;margin:0 auto;color: #f2f2f2;font-size: 1vw;border-bottom: 2px solid #6994b3;">方案库</div>
          <div style="width: 74.5%;height:60%;overflow-y: auto;margin: 2vh auto;text-align: left;margin-left: 7vh;">
            
            <el-radio-group v-model="checkScheme" @change="queryScheme()" style="display: grid;" size="small">
              <el-radio v-for="scheme in schemeLists"  :key="scheme.label" :label="String(scheme.label)"> 
                  {{scheme.value}}
              </el-radio>
            </el-radio-group>

          </div>
        </div>

        
        <div style="width: 95%;height: 35%;margin: 1vh auto;text-align: center;border-bottom: 1px solid #4e849975;">
          <div style="width:35%;margin:0 auto;color: #f2f2f2;font-size: 1vw;border-bottom: 2px solid #6994b3;">设备选择</div>
          <div style="width: 90%;height:80%;margin: 1vh auto 2vh 1vh;text-align: center;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              光伏：
              <el-radio-group v-model="form.isHavaGf" @change="schemeChange('gf')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >有</el-radio>
                <el-radio label="0" >无</el-radio> 
              </el-radio-group>
            </div>

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              风机：
              <el-radio-group v-model="form.isHavaFj" @change="schemeChange('fj')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >有</el-radio>
                <el-radio label="0" >无</el-radio> 
              </el-radio-group>
            </div>

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              电网：
              <el-radio-group v-model="form.isHavaDw" @change="schemeChange('dw')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >有</el-radio>
                <el-radio label="0" >无</el-radio> 
              </el-radio-group>
            </div>

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              电解槽：
              <el-radio-group v-model="form.isHavaDjc" @change="schemeChange('djc')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >碱性</el-radio>
                <el-radio label="2" >PEM</el-radio> 
              </el-radio-group>
            </div>

            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              储氢罐：
              <el-radio-group v-model="form.isHavaCqg" @change="schemeChange('cqg')" size="small" style="margin-top: 0.6vh;">
                <el-radio label="1" >有</el-radio>
                <el-radio label="0" >无</el-radio> 
              </el-radio-group>
            </div>

          </div>
        </div>


        
        <div style="width: 95%;height: 25%;margin: 1vh auto;text-align: center;border-bottom: 1px solid #4e849975;">
          <div style="width:35%;margin:0 auto;color: #f2f2f2;font-size: 1vw;border-bottom: 2px solid #6994b3;">配置目标</div>
          <div style="width: 107%;height:80%;margin: 1vh auto 0vh 0vh;text-align: left;text-align: center;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              <el-radio-group v-model="form.configureTarget" size="small" style="margin-top: 0.6vh;display: grid;">
                <el-radio label="1"><span style="font-size: 1vw;">经济性优先</span></el-radio>
                <el-radio label="2" ><span style="font-size: 1vw;">环保性优先</span></el-radio> 
                <el-radio label="3" ><span style="font-size: 1vw;">兼顾经济和环保</span></el-radio> 
              </el-radio-group>
            </div>
          </div>
        </div>

        
        
        <div style="width: 95%;margin: 1vh auto;text-align: center;">
          <el-button type="primary" size="medium" @click="addScheme()">新增</el-button>
          <el-button type="primary" size="medium" @click="saveScheme()">保存</el-button>
          <el-button type="primary" size="medium" @click="deleteScheme()">删除</el-button>
        </div>

      </div>

                
      <div id="areaDiv1" style="position: absolute;left: 32vh;top: 13vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/fj.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">风机</div>
          </div>
          
          <div style="margin-left: 0.5vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              装机容量：
              <el-input style="width:20%;" :readonly="fanReadonlyFlag" v-model="form.fanInstallCapUp"> 
              </el-input>
              <div style="height: 10px;width: 10px;margin-top: 1vh;"><span>~</span></div>
              <el-input style="width:35%;" :readonly="fanReadonlyFlag" v-model="form.fanInstallCapDown">
                <template slot="append">kW</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">单机容量：
              <el-input style="width:59%;height: 31px;" :readonly="fanReadonlyFlag" v-model="form.fanUnitCap">
                <template slot="append">kW</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">单价：
              <el-input style="width:59%;margin-left: 4vh;" :readonly="fanReadonlyFlag" v-model="form.fanUnitPrice">
                <template slot="append">元</template>
              </el-input>
            </div>
          </div>

      </div>
 
 
      <div id="anchorPoin1" style="width: 1vh;height: 1vh;left: 58vh;top: 43.8vh;float: right;position: absolute;"></div>
            
      <div id="areaDiv2" style="position: absolute;left: 32vh;top: 37vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/gf_w.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">光伏</div>
          </div>
          
          <div style="margin-left: 0.5vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              装机容量：
              <el-input style="width:20%;" :readonly="photovoltaicReadonlyFlag" v-model="form.photovoltaicInstallCapUp"> 
              </el-input>
              <div style="height: 10px;width: 10px;margin-top: 1vh;"><span>~</span></div>
              <el-input style="width:35%;" :readonly="photovoltaicReadonlyFlag" v-model="form.photovoltaicInstallCapDown">
                <template slot="append">kW</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">单机容量：
              <el-input style="width:59%;height: 31px;" :readonly="photovoltaicReadonlyFlag" v-model="form.photovoltaicUnitCap">
                <template slot="append">kW</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">单价：
              <el-input style="width:59%;margin-left: 4vh;" :readonly="photovoltaicReadonlyFlag" v-model="form.photovoltaicUnitPrice">
                <template slot="append">元</template>
              </el-input>
            </div>
          </div>

      </div>
 
    
    
      <div id="areaDiv3" style="position: absolute;left: 32vh;top: 61vh;height: 12vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/dw.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">电网</div>
          </div>
          
          <div style="margin-left: 0.5vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0vh;display: inline-flex;">
              购电限制：
              <el-input style="width:20%;" :readonly="powerGridReadonlyFlag"  v-model="form.powerGridUp"> 
              </el-input>
              <div style="height: 10px;width: 10px;margin-top: 1vh;"><span>~</span></div>
              <el-input style="width:35%;" :readonly="powerGridReadonlyFlag"  v-model="form.powerGridDown">
                <template slot="append">kW</template>
              </el-input>
            </div>
            
          </div>

      </div>

      <div id="lineDiv1" style="position: absolute;left: 70vh;top: 12vh;height: 79%;width: 0.5vh;background: #95ef8499;" ></div>

      <div id="areaDiv4" style="position: absolute;left: 81vh;top: 19vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/djc.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">碱性电解槽</div>
          </div>
          
          <div style="margin-left: 0.5vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              装机容量：
              <el-input style="width:20%;" :readonly="jxReadonlyFlag" v-model="form.alkalineElecInstallCapUp"> 
              </el-input>
              <div style="height: 10px;width: 10px;margin-top: 1vh;"><span>~</span></div>
              <el-input style="width:35%;" :readonly="jxReadonlyFlag" v-model="form.alkalineElecInstallCapDown">
                <template slot="append">kW</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">单机容量：
              <el-input style="width:59%;height: 31px;" :readonly="jxReadonlyFlag" v-model="form.alkalineElecUnitCap">
                <template slot="append">kW</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">单价：
              <el-input style="width:59%;margin-left: 4vh;" :readonly="jxReadonlyFlag" v-model="form.alkalineElecUnitPrice">
                <template slot="append">元</template>
              </el-input>
            </div>
          </div>

      </div>

      
      <div id="areaDiv5" style="position: absolute;left: 81vh;top: 49vh;" class="areaBox"> 
        <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/djc_w.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">PEM电解槽</div>
          </div>
          
          <div style="margin-left: 0.5vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              装机容量：
              <el-input style="width:20%;" :readonly="pemReadonlyFlag" v-model="form.pemInstallCapUp"> 
              </el-input>
              <div style="height: 10px;width: 10px;margin-top: 1vh;"><span>~</span></div>
              <el-input style="width:35%;" :readonly="pemReadonlyFlag" v-model="form.pemInstallCapDown">
                <template slot="append">kW</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">单机容量：
              <el-input style="width:59%;height: 31px;" :readonly="pemReadonlyFlag" v-model="form.pemUnitCap">
                <template slot="append">kW</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">单价：
              <el-input style="width:59%;margin-left: 4vh;" :readonly="pemReadonlyFlag" v-model="form.pemUnitPrice">
                <template slot="append">元</template>
              </el-input>
            </div>
          </div>

      </div>

      <div id="lineDiv2" style="position: absolute;left: 120vh;top: 12vh;height: 79%;width: 0.5vh;background: rgb(41 194 239 / 55%);" >
      </div>
      <div id="anchorPoin2" style="width: 1vh;height: 1vh;top:28.4vh;left: 119.5vh;float: right;position: absolute;"></div>

      
      <div id="areaDiv6" style="position: absolute;left: 132vh;top: 19vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/ysj.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">压缩机</div>
          </div>
          
          <div style="margin-left: 0.5vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
              流量：
              <el-input style="width:74%;" v-model="form.compressFlowRate">
                <template slot="append">kg/h</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              电耗：
              <el-input style="width:74%;" v-model="form.compressPowerConsump">
                <template slot="append">kW</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              单价：
              <el-input style="width:74%;margin-left: 0vh;" v-model="form.compressUnitPrice">
                <template slot="append">元</template>
              </el-input>
            </div>
          </div>

      </div>

      
      <div id="areaDiv7" style="position: absolute;left: 132vh;top: 49vh;" class="areaBox"> 
          <div style="display: inline-flex;width: 100%;">
            <img class="imgClass" src="../../assets/images/cqg.png" />
            <div style="width: 68%;font-size: 3vh; margin-top: 2vh;color: #FFFFFF;font-family: cursive;">储氢罐</div>
          </div>
          
          <div style="margin-left: 0.5vh;width: 100%;text-align: left;">
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex;">
                容量：
              <el-input style="width:20%;margin-left: 4vh;" :readonly="cqgReadonlyFlag" v-model="form.hydrogenStorageCapUp"> 
              </el-input>
              <div style="height: 10px;width: 10px;margin-top: 1vh;"><span>~</span></div>
              <el-input style="width:35%;" :readonly="cqgReadonlyFlag" v-model="form.hydrogenStorageCapDown">
                <template slot="append">kg</template>
              </el-input>

            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              工作压力：
              <el-input style="width:60%;height: 31px;" :readonly="cqgReadonlyFlag" v-model="form.workPressure">
                <template slot="append">MPa</template>
              </el-input>
            </div>
            <div style="font-size: 2vh;color: #FFFFFF;font-family: cursive;margin-top: 0.5vh;display: inline-flex">
              单价：
              <el-input style="width:60%;margin-left: 4vh;" :readonly="cqgReadonlyFlag" v-model="form.hydrogenStorageUnitPrice">
                <template slot="append">元</template>
              </el-input>
            </div>
          </div>

      </div>

      <div id="lineDiv3" style="position: absolute;left: 169vh;top: 12vh;height: 79%;width: 0.5vh;background: #2B86C0;" ></div>
      <div id="anchorPoin3" style="width: 1vh;height: 1vh;top:28.5vh;left: 169vh;float: right;position: absolute;"></div>
      <div id="anchorPoin4" style="width: 1vh;height: 1vh;top:58.5vh;left: 169vh;float: right;position: absolute;"></div>

  </div>
</template>

<script>
import { create } from 'js-md5';



  export default {
    name: 'ewHydrogenProductionPathway',
    
    beforeRouteLeave (to, from, next) {
     
      for(var i = 0;i<this.connectionArr.length;i++){
        var key = this.connectionArr[i];
        var connRem = this.connectionMaps.get(key);
        
        if(connRem){ 
          this.$jsPlumbObj.deleteConnection(connRem);  
          this.$nextTick(function(){
            this.$jsPlumbObj.deleteConnection(connRem);  
          });
        }

      }
            
      var connDivs = $(".jtk-connector");
      var endpointDivs = $(".jtk-endpoint");

      if(connDivs){
        for(var i = 0;i<connDivs.length;i++){
          var dom = connDivs[i];
          $(dom).remove();
        }
      }

      if(endpointDivs){
        for(var i = 0;i<endpointDivs.length;i++){
          var dom = endpointDivs[i];
          $(dom).remove();
        }
      }

      next();
    },
    beforeRouteEnter(to, from, next) {
       
      setTimeout(function(){
       
        if(this.connectionArr){
          for(var i = 0;i<this.connectionArr.length;i++){
            var key = this.connectionArr[i];
            var connRem = this.connectionMaps.get(key);
            
            if(connRem){ 
              this.$jsPlumbObj.deleteConnection(connRem);  
              this.$nextTick(function(){
                this.$jsPlumbObj.deleteConnection(connRem);  
              });
            }

          }
        }

      },1000);
      
      next();
    },
    beforeRouteUpdate(to, from, next) {
  
      for(var i = 0;i<this.connectionArr.length;i++){
        var key = this.connectionArr[i];
        var connRem = this.connectionMaps.get(key);
        
        if(connRem){ 
          this.$jsPlumbObj.deleteConnection(connRem);  
          this.$nextTick(function(){
            this.$jsPlumbObj.deleteConnection(connRem);  
          });
        }

      }
      next();
    },
    data() {
      return {
        form: {
          id:"",
          projectId : "",
          schemeName:"",
          checkScheme:"",
          isHavaCqg: '1',
          isHavaFj: '1',
          isHavaGf: '1',
          isHavaDw: '1',
          isHavaDjc: '1',
          configureTarget:"1",
          fanInstallCapUp : "",
          fanInstallCapDown : "",
          fanUnitCap : "",
          fanUnitPrice : "",
          photovoltaicInstallCapUp : "",
          photovoltaicInstallCapDown : "",
          photovoltaicUnitCap : "",
          photovoltaicUnitPrice : "",
          powerGridUp : "",
          powerGridDown : "",
          alkalineElecInstallCapUp : "", 
          alkalineElecInstallCapDown : "",
          alkalineElecUnitCap : "",
          alkalineElecUnitPrice : "",
          pemInstallCapUp : "", 
          pemInstallCapDown : "",
          pemUnitCap : "",
          pemUnitPrice : "",
          compressUnitPrice : "",
          compressPowerConsump : "",
          compressFlowRate : "",
          hydrogenStorageCapUp : "",
          hydrogenStorageCapDown : "",
          workPressure : "",
          hydrogenStorageUnitPrice : "",
          calculationStatus:""
        },
        photovoltaicReadonlyFlag : false,
        fanReadonlyFlag : false,
        powerGridReadonlyFlag : false,
        cqgReadonlyFlag : false,
        pemReadonlyFlag : false,
        jxReadonlyFlag : false,

        schemeLists:[
          {label:"0",value:"暂无预设方案，请维护"}, 
        ],
        checkScheme : "",
        $jsPlumbObj : {},
        connectionMaps : {}, 
        connectionArr : [],
        projectId : ""
      }
    },
    created(){ 
      

    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.form.projectId = this.projectId;

      this.connectionMaps = this.getMap();
      this.generateWorkFlow();

      this.querySchemeList();

    },
    methods: {  

        querySchemeList : function(){

          var vm = this;

          this.$http.post('/iepsapi/ea/hpEconomicAnalysis/querySchemeList?projectId='+this.projectId+"&tableName=ew_Hydrogen_production_pathway").then((res) => {
            var result = res.data;
          
            if(result){
  
              vm.checkScheme = result.checkScheme;

              if(result.schemeLists){
                vm.schemeLists = result.schemeLists;
              }
              

              vm.queryScheme();
            }
          }).catch((error) => {
            console.log(error);
          });

        },
        
      deleteScheme : function(){
        var vm = this;
        this.$confirm('确认删除该方案吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$http.post('/iepsapi/ea/hpEconomicAnalysis/deleteScheme?schemeId='+this.checkScheme+"&tableName=ew_hydrogen_production_pathway").then((res) => {
            vm.querySchemeList();
          })

        })

      },

        queryScheme : function(){

          if(this.checkScheme!=0){

            var vm = this;

            this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryScheme?schemeId='+this.checkScheme+"&tableName=ew_hydrogen_production_pathway"+"&projectId="+this.projectId).then((res) => {
              var result = res.data.data;

              if(result){
                vm.form = result;

                if(vm.form.isHavaGf=="1"){
                  $("#areaDiv2").attr("class","areaBox");
                  vm.photovoltaicReadonlyFlag = false;
                }else{
                  $("#areaDiv2").attr("class","disableAreaBox");
                  // vm.form.photovoltaicInstallCapUp = "0";
                  // vm.form.photovoltaicInstallCapDown = "0";
                  // vm.form.photovoltaicUnitCap = "0";
                  // vm.form.photovoltaicUnitPrice = "0";
                  vm.photovoltaicReadonlyFlag = true;
                }


                  
                if(vm.form.isHavaFj=="1"){
                  $("#areaDiv1").attr("class","areaBox");
                  vm.fanReadonlyFlag = false;
                }else{
                  $("#areaDiv1").attr("class","disableAreaBox");
                  // vm.form.fanInstallCapUp = "0";
                  // vm.form.fanInstallCapDown = "0";
                  // vm.form.fanUnitCap = "0";
                  // vm.form.fanUnitPrice = "0";
                  vm.fanReadonlyFlag = true;
                }

                  
                if(vm.form.isHavaDw=="1"){
                  $("#areaDiv3").attr("class","areaBox");
                  vm.powerGridReadonlyFlag = false;
                }else{
                  $("#areaDiv3").attr("class","disableAreaBox");
                  // vm.form.powerGridUp = "0";
                  // vm.form.powerGridDown = "0"; 
                  vm.powerGridReadonlyFlag = true;
                }

                if(vm.form.isHavaCqg=="1"){
                  $("#areaDiv7").attr("class","areaBox");
                  vm.cqgReadonlyFlag = false;
                }else{
                  $("#areaDiv7").attr("class","disableAreaBox");

                  // vm.form.hydrogenStorageCap = "0";
                  // vm.form.workPressure = "0"; 
                  // vm.form.hydrogenStorageUnitPrice = "0"; 

                  vm.cqgReadonlyFlag = true;
                }
                if(vm.form.isHavaDjc=="1"){
                  $("#areaDiv4").attr("class","areaBox");
                  $("#areaDiv5").attr("class","disableAreaBox");

                  vm.jxReadonlyFlag = false;
                  vm.pemReadonlyFlag = true;

                }else{
                  $("#areaDiv5").attr("class","areaBox");
                  $("#areaDiv4").attr("class","disableAreaBox");

                  // vm.form.alkalineElecInstallCapUp = "0";
                  // vm.form.alkalineElecInstallCapDown = "0"; 
                  // vm.form.alkalineElecUnitCap = "0"; 
                  // vm.form.alkalineElecUnitPrice = "0"; 

                  // vm.form.pemInstallCapUp = "0";
                  // vm.form.pemInstallCapDown = "0"; 
                  // vm.form.pemUnitCap = "0"; 
                  // vm.form.pemUnitPrice = "0"; 

                  vm.jxReadonlyFlag = true;
                  vm.pemReadonlyFlag = false;

                }


                
              }


            }).catch((error) => {
              console.log(error);
            });

          }
           


        },

        addScheme : function(){
          
          var schemeLists = this.schemeLists;
          var maxNo = 0;
          var valueNo = "-1";
          for(var i = 0;i<schemeLists.length;i++){
            var value = schemeLists[i].value;
            var label = schemeLists[i].label;

            var num = value.replace(/[^\d]/g,' ');
            if(num>maxNo){
              maxNo = num;
            }
            if(label=="0"){
              valueNo = "0";
            }
          }

          var scheme = {
            label:"0",
            value:"预设方案"+(parseInt(maxNo)+1)
          }

          this.$prompt('请输入方案名称', '提示', {
            confirmButtonText: '确定',
            inputValue: "预设方案"+(parseInt(maxNo)+1),
            cancelButtonText: '取消',
          }).then(({ value }) => {
           
           
            if(value!=null&&value!=""){
            
              if(valueNo!="0"){
                
                scheme.value = value;

                this.schemeLists.push(scheme);
                this.checkScheme = "0";

                this.form = {
                  id:"",
                  projectId : this.projectId,
                  schemeName : value,
                  checkScheme:"",
                  isHavaCqg: '1',
                  isHavaFj: '1',
                  isHavaGf: '1',
                  isHavaDw: '1',
                  isHavaDjc: '1',
                  configureTarget:"1",
                  
                  fanInstallCapUp : "",
                  fanInstallCapDown : "",
                  fanUnitCap : "",
                  fanUnitPrice : "",
                  photovoltaicInstallCapUp : "",
                  photovoltaicInstallCapDown : "",
                  photovoltaicUnitCap : "",
                  photovoltaicUnitPrice : "",
                  powerGridUp : "",
                  powerGridDown : "",
                  alkalineElecInstallCapUp : "", 
                  alkalineElecInstallCapDown : "",
                  alkalineElecUnitCap : "",
                  alkalineElecUnitPrice : "",
                  pemInstallCapUp : "", 
                  pemInstallCapDown : "",
                  pemUnitCap : "",
                  pemUnitPrice : "",
                  compressUnitPrice : "",
                  compressPowerConsump : "",
                  compressFlowRate : "",
                  hydrogenStorageCapUp : "",
                  hydrogenStorageCapDown : "",
                  workPressure : "",
                  hydrogenStorageUnitPrice : "",
                  calculationStatus:"0"
                }
                this.form.projectId = this.projectId;

                $("#areaDiv2").attr("class","areaBox");
                this.photovoltaicReadonlyFlag = false;
              
                $("#areaDiv1").attr("class","areaBox");
                this.fanReadonlyFlag = false;
            
                $("#areaDiv3").attr("class","areaBox");
                this.powerGridReadonlyFlag = false;

                $("#areaDiv7").attr("class","areaBox");
                this.cqgReadonlyFlag = false;
            
                
                $("#areaDiv4").attr("class","areaBox");
                $("#areaDiv5").attr("class","disableAreaBox");
                
                this.jxReadonlyFlag = false;
                this.pemReadonlyFlag = true;
                this.form.pemInstallCapUp = "0";
                this.form.pemInstallCapDown = "0"; 
                this.form.pemUnitCap = "0"; 
                this.form.pemUnitPrice = "0"; 


              }else{

                this.$message({
                  type: 'info',
                  message: '请先完成当前方案的维护操作！'
                });

              }
          

            }else{

              this.$message({
                type: 'info',
                message: '请输入方案名称'
              });   

              return;

            }


          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });       
          });


        },

        saveScheme : function(){
  
          var vm = this;
          this.form.checkScheme = "1";
          this.$http.post('/iepsapi/ea/hpEconomicAnalysis/saveScheme', {
            "pageData": JSON.stringify(this.form),
            "tableName":"ew_hydrogen_production_pathway"
          }).then((res) => {

            if (res.data.flag) {
              vm.form.id = res.data.id;
              this.$message({
                type: 'success',
                message: res.data.message
              });

              vm.querySchemeList();

            } else {
              this.$message.error(res.data.message);
            }
          });

        },
        
        schemeChange : function(type){

          if(type=="gf"){
            if(this.form.isHavaGf=="1"){
              $("#areaDiv2").attr("class","areaBox");
              this.photovoltaicReadonlyFlag = false;
            }else{
              $("#areaDiv2").attr("class","disableAreaBox");
              this.form.photovoltaicInstallCapUp = "0";
              this.form.photovoltaicInstallCapDown = "0";
              this.form.photovoltaicUnitCap = "1";
              this.form.photovoltaicUnitPrice = "0";
              this.photovoltaicReadonlyFlag = true;
            }
          }else if(type=="fj"){

            if(this.form.isHavaFj=="1"){
              $("#areaDiv1").attr("class","areaBox");
              this.fanReadonlyFlag = false;
            }else{
              $("#areaDiv1").attr("class","disableAreaBox");
              this.form.fanInstallCapUp = "0";
              this.form.fanInstallCapDown = "0";
              this.form.fanUnitCap = "1";
              this.form.fanUnitPrice = "0";
              this.fanReadonlyFlag = true;
            }

          }else if(type=="dw"){

            if(this.form.isHavaDw=="1"){
              $("#areaDiv3").attr("class","areaBox");
              this.powerGridReadonlyFlag = false;
            }else{
              $("#areaDiv3").attr("class","disableAreaBox");
              this.form.powerGridUp = "0";
              this.form.powerGridDown = "0"; 
              this.powerGridReadonlyFlag = true;
            }

          }else if(type=="cqg"){
       

            if(this.form.isHavaCqg=="1"){
              $("#areaDiv7").attr("class","areaBox");
              this.cqgReadonlyFlag = false;
            }else{
              $("#areaDiv7").attr("class","disableAreaBox");

              this.form.hydrogenStorageCapUp = "0";
              this.form.hydrogenStorageCapDown = "0";

              this.form.workPressure = "0"; 
              this.form.hydrogenStorageUnitPrice = "0"; 

              this.cqgReadonlyFlag = true;
            }


          }else if(type=="djc"){
            
            if(this.form.isHavaDjc=="1"){
              $("#areaDiv4").attr("class","areaBox");
              $("#areaDiv5").attr("class","disableAreaBox");
              
              this.jxReadonlyFlag = false;
              this.pemReadonlyFlag = true;

              this.form.pemInstallCapUp = "0";
              this.form.pemInstallCapDown = "0"; 
              this.form.pemUnitCap = "0"; 
              this.form.pemUnitPrice = "0"; 

            }else{
              $("#areaDiv5").attr("class","areaBox");
              $("#areaDiv4").attr("class","disableAreaBox");

              this.form.alkalineElecInstallCapUp = "0";
              this.form.alkalineElecInstallCapDown = "0"; 
              this.form.alkalineElecUnitCap = "0"; 
              this.form.alkalineElecUnitPrice = "0"; 

       

              this.jxReadonlyFlag = true;
              this.pemReadonlyFlag = false;
            }


          }

        },

        getMap : function() {
          
          //初始化map_,给map_对象增加方法，使map_像Map
          var map_ = new Object();
          map_.put = function(key, value) {
              map_[key+'_'] = value;
          };
          map_.get = function(key) {
              return map_[key+'_'];
          };
          map_.remove = function(key) {
              delete map_[key+'_'];
          };
          map_.keyset = function() {
              var ret = "";
              for(var p in map_) {
                  if(typeof p == 'string' && p.substring(p.length-1) == "_") {
                      ret += ",";
                      ret += p.substring(0,p.length-1);
                  }
              }
              if(ret == "") {
                  return ret.split(",");
              } else {
                  return ret.substring(1).split(",");
              }
          };
          return map_;
      },

      generateWorkFlow : function(){

 
         var color1 = "#6ba785";
         var color2 = "#4AA0D6"; 
         var color3 = "#E34D58"; 

          

          var anchor = ['Right', 'Left'];

          this.connectDiv("areaDiv1","lineDiv1",anchor,"",color1,"");

          
        
          this.connectDiv("anchorPoin1","lineDiv1",anchor,"Straight",color1,"");

          this.connectDiv("areaDiv3","lineDiv1",anchor,"",color1,"");
   

          this.connectDiv("lineDiv1","areaDiv4",anchor,"",color1,"");
          this.connectDiv("lineDiv1","areaDiv5",anchor,"",color1,"");

 
          this.connectDiv("areaDiv4","lineDiv2",anchor,"",color2,"");
          this.connectDiv("areaDiv5","lineDiv2",anchor,"",color2,"");
 
          this.connectDiv("anchorPoin2","areaDiv6",anchor,"Straight",color2,"");
          //this.connectDiv("anchorPoin3","areaDiv7",anchor,"Straight",color2,"");

          var anchor = ['Bottom', 'Top'];
          this.connectDiv("areaDiv6","areaDiv7",anchor,"Straight",color2,"");
          var anchor = ['Right', 'Left'];
          this.connectDiv("areaDiv6","anchorPoin3",anchor,"Straight",color2,"");
          this.connectDiv("areaDiv7","anchorPoin4",anchor,"Straight",color2,"");

      },
    
 
    
      connectDiv : function(source,target,anchor,connector,stroke,label){
 

          var jsPlumbObj = this.getJsPlumb(stroke,connector);
  
          if(label){

              var conn = jsPlumbObj.connect({
                  source : source,
                  target : target,
                  anchor: anchor,
                  overlays : [
                      ["Arrow", {  location: 1 }], 
                      label
                  ] 
              });
              this.connectionMaps.put(source+"_"+target,conn);
              this.connectionArr.push(source+"_"+target);
            }else{
                          
              var conn = jsPlumbObj.connect({
                  source : source,
                  target : target,
                  anchor: anchor,
                  overlays : [
                      ["Arrow", {  location: 1 }], 
                  ] 
              });
              this.connectionMaps.put(source+"_"+target,conn);
              this.connectionArr.push(source+"_"+target);
          }

          window.addEventListener('resize', () => {
              jsPlumbObj.repaintEverything()
          })

          return jsPlumbObj;

      },
 

      
      getJsPlumb(lineColor,connector){
          
          var connectorValue = "Flowchart";//Straight

          if(connector!=null&&connector!=""){
              connectorValue = connector;
          }

          this.$jsPlumbObj = this.$jsPlumb;

          var jsPlumb = this.$jsPlumb.getInstance({

              ConnectionsDetachable   : false,//连接是否可以使用鼠标默认分离

              //  Endpoint:['Image', {
              //    src: 'static/images/def_endpoint.png',
              //  }] , // 端点的形状
              Anchor: "Continuous", 
              Endpoint : "Blank",//端点（锚点）的样式声明（Dot）
              EndpointStyle: { radius: 1, fill: "#FFFFFF" }, //端点默认样式
              PaintStyle: { stroke: lineColor, strokeWidth: 3  }, // 连线样式
              HoverPaintStyle: { stroke: lineColor }, // 默认悬停样式
              // EndpointHoverStyle: {src: 'static/images/endpoint.png', },
              EndpointHoverStyle: { fill: lineColor }, // 端点悬停样式
              ConnectionOverlays: [
              [
                  "Arrow",
                  {
                      // 箭头
                      location: 1,
                      visible: true,
                      // paintStyle: {
                      //     stroke: lineColor,
                      //     fill: lineColor
                      // }
                  }
                  
              ]
              ],
              Connector: [connectorValue, { gap: 5 }], //要使用的默认连接器的类型：折线，流程等
              DrapOptions: { cursor: "crosshair", zIndex: 2000 },
              Scope: "jsPlumb_DefaultScope"
          });

          return jsPlumb;

      },
 

    }
  }
</script>


<style>

  .el-message-box {
      display: inline-block;
      width: 420px;
      padding-bottom: 10px;
      vertical-align: middle;
      background-color: #263675;
      border-radius: 4px;
      border: 1px solid #354b80;
      font-size: 18px;
      -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      text-align: left;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
  }
  .el-message-box__title {
    padding-left: 0;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1;
    color: #ffffff;
  }

  .el-message-box__content {
    padding: 10px 15px;
    color: #fff;
    font-size: 14px;
  }
</style>

 


<style scoped>

  /deep/ .el-message-box {
      display: inline-block;
      width: 420px;
      padding-bottom: 10px;
      vertical-align: middle;
      background-color: #5668cf;
      border-radius: 4px;
      border: 1px solid #374d80;
      font-size: 18px;
      -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      text-align: left;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
  }

  /deep/ .el-radio {
        color: #ffffff;
        cursor: pointer;
        margin-right: 15px;
    }

  /deep/ .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #f2f2f2;
      display: inline-block;
      font-size: inherit;
      height: 31px;
      line-height: 31px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  /deep/ .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 10px;
    width: 1px;
    white-space: nowrap;
  }

.imgClass{
  vertical-align: middle;
  margin-top: 1.5vh;
  margin-left: 2vh;
  width: 5vh;
  height: 5vh;
}
 


.areaBox{
  display: block;
  width: 27vh;
  height: 20vh;
  border-radius: 2vh;
  background-image: linear-gradient(to right, #425bb5, #8ecd7e7a);
  cursor: pointer;
}

.disableAreaBox{
  display: block;
  width: 27vh;
  height: 20vh;
  border-radius: 2vh;
  background-image: linear-gradient(to right, #232a47, #5656577a);
  cursor: pointer;
}


.configBox{
  display: block;
  width: 27vh;
  height: 67vh;
  border-radius: 2vh;
  background-image: linear-gradient(to bottom, #2946ad, #61dde37a);
}

</style>
